<script setup>
  import { ref } from 'vue'

  //图书列表
  const bookList=ref([
    { id:1,name:'《红楼梦》',auther:'曹雪芹'},
    { id:2,name:'《西游记》',auther:'吴承恩'},
    { id:3,name:'《三国演义》',auther:'罗贯中'},
    { id:1,name:'《水浒传》',auther:'施耐庵'}
  ])

  const onDel=(i)=>{
    //i为当前点击的下标
    //删除前确认
    if(window.confirm('是否确认删除')){
      //进行删除
      bookList.value.splice(i,1)
    }
  }
</script>

<template>
  <h3>比特人的书架</h3>
  <ul>
    <li v-for="(item,index) in bookList">
      <span>{{ item.name }}</span>
      <span>{{ item.auther }}</span>
      <button @click="onDel(index)">删除</button>
    </li>
  </ul>
</template>



<style>
  #app{
    width:400px;
    margin:100px auto
  }

  ul{
    list-style:none;
  }
  ul li{
    display:flex;
    padding:10px 0;
    justify-content: space-around;
    border-bottom:1px solid #ccc;
  }
</style>